/**
 * Description
 *
 * Creation Date 25/12/2017
 * @author Candy
 */
import React, { Component } from 'react'
import {
	StyleSheet,
	View,
	Image,
	TouchableHighlight,
	TouchableOpacity,
	Platform,
	FlatList,
	Text,
	TextInput
} from 'react-native';
import { is, fromJS} from 'immutable';
import { connect } from 'react-redux';
import Icon from 'react-native-vector-icons/Ionicons';
import { screen, color } from '../../utils';
import { ImageSwiper, TextTool } from '../../components';
import { login, getCaptchas } from '../../api';
import { setStore, getStore, removeStore } from '../../utils/tools';
import { LoginAction, GetUserInfo } from '../../redux/actions/rootActions';

import ButtonItem from '../../components/ButtonItem';

class Login extends Component {
	constructor(props){
		super(props);
		this.state = {
			username: '',
			password: '',
			cap: ''
		}
	}

	loginFunc = async () => {
		const { title } = this.props.navigation.state.params;
		await login(this.state.username, this.state.password, this.state.cap).then(res => {
			setStore('user_id', res.data.user_id);
			console.log(this.props.LoginAction)
			this.props.LoginAction(res.data)
		})
		if (title && title == 'payment') {
			this.props.navigation.navigate('PaymentDetail')
		} else {
			this.props.navigation.navigate('Profile')
		}

	};

	getCaptchasFunc = () => {
		try {
			getCaptchas().then(res => {
				this.setState({capImg: res.data.code})
			})
		} catch (err) {
			console.log(err)
		}
	}

	componentWillMount() {
		this.getCaptchasFunc();
	}

	shouldComponentUpdate(nextProps, nextState) {
		return !is(fromJS(this.props), fromJS(nextProps)) || !is(fromJS(this.state),fromJS(nextState))
	}
	componentWillReceiveProps(nextProps) {
		this.getCaptchasFunc();
	}

	render() {
		return (
			<View style={styles.container}>
				<View style={styles.gridContainer}>
					<Text style={styles.textStyle}>Name</Text>
					<TextInput
						style={{width: 200, height: 25, marginRight: 15, marginLeft:15,paddingLeft:5, borderColor: 'gray', borderWidth: 1, textAlign: 'left'}}
						autoCapitalize = 'none'
						placeholder = 'Name'
						onChangeText={(username) => this.setState({username})}
					/>
				</View>
				<View style={styles.gridContainer}>
					<Text style={styles.textStyle}>Password</Text>
					<TextInput
						style={{width: 200, height: 25, marginRight: 15, marginLeft:15,paddingLeft:5, borderColor: 'gray', borderWidth: 1, textAlign: 'left'}}
						autoCapitalize = 'none'
						secureTextEntry={true}
						placeholder = 'Password'
						onChangeText={(password) => this.setState({password})}
					/>
				</View>
				<View style={styles.gridContainer}>
					<Text style={styles.textStyle}>Verification</Text>
					<TextInput
						style={{width: 100, height: 25, marginRight: 15, marginLeft:15,paddingLeft:5, borderColor: 'gray', borderWidth: 1, textAlign: 'left'}}
						keyboardType="numeric"
						autoCapitalize = 'none'
						placeholder = 'Code'
						onChangeText={(cap) => this.setState({cap})}
					/>
					<Image style={styles.capImage} resizeMode='stretch'
						   source={{uri: this.state.capImg}} onPress={() => this.getCaptchasFunc()} />
				</View>
				<ButtonItem buttonText="LOGIN" onPress={() => this.loginFunc()} />
			</View>
		)
	}
}


//连接reducer
export default connect((state) => {
	const { profileReducers } = state;  // 这里的beautyReducers注意和对应的reducer文件export的类相同
	return {
		profileReducers
	}
}, { LoginAction })(Login) // 这里是对应的存值的方法,导出当前模块


const styles = StyleSheet.create({
	container: {
		flex: 1,
		backgroundColor: color.backgroundColor
	},
	gridContainer: {
		marginRight: 20,
		marginLeft: 20,
		paddingTop: 10,
		paddingBottom: 5,
		flexDirection: 'row',
		flexWrap: 'wrap',
		alignItems: 'center',
	},
	textStyle:{
		width:75,
		alignItems:'center',
		justifyContent: 'center'
	},
	capImage: {
		width: 80,
		height: 30
	},
	price: {
		fontSize: 18,
		textAlign: 'center',
		fontWeight: 'bold'
		// color: color.theme
	}
});